<!doctype html>
<html lang="en">
<head>
    <title>Filter - Overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Overview" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijcombobox.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijfilter.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijcombobox.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijfilter.js" type="text/javascript"></script>

    <style type="text/css">
       .filterDialog-dialogContainer
       {
          overflow: visible !important;
          width: 400px;
       }

       #wijpopup.filterDialog-dialogContainer
		 {
		    padding: 0.4em;
       }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
           $("#uidialogBtn").click(function(e, args) {
              var dialog = $("#uidialog");

              if (!dialog.data("wijfilter")) {
                 dialog = $("<div id=\"uidialog\"></div")
                    .appendTo(document.body)
                    .addClass("filterDialog-dialogContainer ui-widget-content ui-corner-all ui-helper-clearfix")
                    .wijfilter({
                       data: [[0], [1], [2], [3], [4]],
                       dataKey: 0,
                       enableSortButtons: true,
                       availableOperators: [ { name: "operator1" }, { name: "operator2" }, { name: "operator3" } ],
                       showHeader: false,
                       close: function (e, args) {
                          if (dialog.dialog("isOpen")) {
                             dialog.dialog("close");
                          }
                       }
                    })
                    .dialog({
                       resizable: false,
                       modal: true,
                       closeText: "",
                       title: "Column",
                       width: "auto",
                       height: "auto",
                       position: {
                          of: $(e.target),
                          my: "left top",
                          at: "left bottom",
                          collision: "flip none"
                       },
                       close: function() {
                         dialog.wijfilter("triggerClose");
                       }
                    });
              } else {
                 dialog.dialog("open");
              }
           });

           $("#wijpopupBtn").click(function(e, args) {
              var dialog = $("#wijpopup");

              if (!dialog.data("wijfilter")) {
                 dialog = $("<div id=\"wijpopup\"></div")
                    .appendTo(document.body)
                    .addClass("filterDialog-dialogContainer ui-widget-content ui-corner-all ui-helper-clearfix")
                    .wijfilter({
                       data: [[0], [1], [2], [3], [4]],
                       dataKey: 0,
                       enableSortButtons: true,
                       availableOperators: [ { name: "operator1" }, { name: "operator2" }, { name: "operator3" } ],
                       title: "Column",
                       close: function (e, args) {
                          dialog.wijpopup("hide");
                       }
                    })
                    .wijpopup({
                       position: {
                          of: $(e.target),
                          my: "left top",
                          at: "left bottom",
                          collision: "flip none"
                       }
                    });
              }
              
              dialog.wijpopup("show");
           });
        });
     </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
				<input type="button" id="uidialogBtn" value="ui-dialog" />
				<input type="button" id="wijpopupBtn" value="wijpopup" />

            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
          <p>
            Wijmo Filter allows creation of an Excel-like filter dialog.
            This sample shows how to create a popup dialog using the ui-dialog and wijpopup widgets.
          </p>
        </div>
    </div>
</body>
</html>
